<template>
	<div>
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog">
			<VideoPlayer v-if="state.dialog.isShowDialog" :url="state.url"></VideoPlayer>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="VideoPlayerDialog">
import { reactive, defineAsyncComponent } from 'vue';

const VideoPlayer = defineAsyncComponent(() => import('/@/components/player/video/index.vue'));

const state = reactive({
	dialog: {
		title: '',
		isShowDialog: false,
	},

	url: '',
});

const openVideoDialog = (name: string, url: string) => {
	state.dialog.title = name;
	state.dialog.isShowDialog = true;

	console.log('video url: ', url);

	state.url = url;
};

defineExpose({
	openVideoDialog,
});
</script>
